<template>
    <div>
        <div class="dialog-wrap">
            <div class="dialog-cover" v-if="isShow" @click="closeMyself"></div>
            <div class="dialog-content" v-if="isShow">
                <p class="dialog-close" @click="closeMyself">X</p>
                <slot>Hello!!</slot>
            </div>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
export default{
    props:{
        isShow:{
            type:Boolean,
            default:false
        }
    },
    data(){
        return{

        }
    },
}
</script>
<style scoped>
    .drop-enter-active {
        transition: all .5s ease;
    }
    .drop-leave-active {
        transition: all .3s ease;
    }
    .drop-enter {
        transform: translateY(-500px);
    }
    .drop-leave-active {
        transform: translateY(-500px);
    }

    .dialog-wrap {
        position: fixed;
        width: 100%;
        height: 100%;
    }
    .dialog-cover {
        background: #000;
        opacity: .3;
        position: fixed;
        z-index: 5;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .dialog-content {
        width: 50%;
        position: fixed;
        max-height: 50%;
        overflow: auto;
        background: #fff;
        top: 20%;
        left: 50%;
        margin-left: -25%;
        z-index: 10;
        border: 2px solid #464068;
        padding: 2%;
        line-height: 1.6;
    }
    .dialog-close {
        position: absolute;
        right: 5px;
        top: 5px;
        width: 20px;
        height: 20px;
        text-align: center;
        cursor: pointer;
    }
    .dialog-close:hover {
        color: #4fc08d;
    }
</style>